/***
A collection of useful `@mixins` like `@clearfix`, `@a11y-hide` etc.

Check the SASS-file for all of them.
***/
// Adds an arrow to an element
@mixin arrow ($position, $size, $background, $border-size, $border-color, $align: 50%) {
	$invPosition: right;
	$horizOrVertic: top;

	@if ($position == left) {
		$invPosition: right;
		$horizOrVertic: top;
	}
	@elseif ($position == top) {
		$invPosition: bottom;
		$horizOrVertic: left;
	}
	@elseif ($position == right) {
		$invPosition: left;
		$horizOrVertic: top;
	}
	@elseif ($position == bottom) {
		$invPosition: top;
		$horizOrVertic: left;
	}

	position: relative;

	&:after, &:before {
		#{$invPosition}: 100%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	&:after {
		border-color: rgba(250, 250, 250, 0);
		border-#{$invPosition}-color: $background;
		border-width: $size;
		#{$horizOrVertic}: $align;
		margin-#{$horizOrVertic}: -$size;
	}

	&:before {
		border-color: rgba(102, 102, 102, 0);
		border-#{$invPosition}-color: $border-color;
		border-width: $size + $border-size + 1px;
		#{$horizOrVertic}: $align;
		margin-#{$horizOrVertic}: -($size + $border-size + 1px);
	}
}

@mixin cols ($num: 3, $width: 300px, $margin: 20px) {
	@include clearfix;
	list-style: none;
	margin-left: 0;

	> *, 
	> * {
		width: $width;
		margin: 0 $margin $margin 0;
		float: left;
	}

	> :nth-child(#{$num}n), 
	> :nth-child(#{$num}n) {
		margin-right: 0;
	}

	> :nth-child(#{$num}n) + *, 
	> :nth-child(#{$num}n) + * {
		clear: left;
	}
}

// Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix {
	zoom: 1;

	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

// Accessibility hide
@mixin a11y-hide {
	position: absolute;
	left: -1000000px;
	top: -1000000px;
}

// UN-accessibility hide
@mixin a11y-show {
	position: static;
	left: 0;
	top: 0;
}

// Data definition
@mixin data-definition {
	dt {
		display: inline;
		font-weight: bold;
	}

	dt:after {
		content: ": ";
	}

	dd {
		display: inline;
		margin: 0;
	}

	dd:after {
		content: "\a";
		white-space: pre;
	}
}

@mixin separated-inline-list ($separator: " | ") {
	margin-left: 0;
	padding-left: 0;
	list-style: none;

	li {
		display: inline;
	}

	li:after {
		content: $separator;
	}

	li:last-child:after {
		content: "";
	}
}

// http://www.456bereastreet.com/archive/201110/styling_button_elements_to_look_like_links/
@mixin button-like-text {
    overflow: visible; // Shrinkwrap the text in IE7-
    margin: 0;
    padding: 0;
    border: 0;
    color: #8f1f08; // Match your link colour
    background: transparent;
    font: inherit; // Inherit font settings (doesn’t work in IE7-)
    line-height: normal; // Override line-height to avoid spacing issues
    text-decoration: underline; // Make it look linky
    cursor: pointer; // Buttons don’t make the cursor change in all browsers
    -moz-user-select: text; // Make button text selectable in Gecko

	// Make sure keyboard users get visual feedback
	&:hover,
	&:focus {
		color: #800000;
		background-color: #e3e0d1;
	}

	// Remove mystery padding in Gecko browsers. See https: //bugzilla.mozilla.org/show_bug.cgi?id=140562
	&::-moz-focus-inner {
		padding: 0;
		border: 0;
	}
}

@mixin bullet-nav {
	margin: 0;
	padding: 0;
	text-align: center;
	line-height: 1;
	font-size: 1px;

	a {
		background: rgba(160, 160, 160, .5);

		display: inline-block;
		position: relative;

		width: 12px;
		height: 12px;
		margin: 0 5px;

		text-indent: -1000000px;

		@include box-shadow(inset 1px 1px 1px rgba(0, 0, 0, .6));
		@include border-radius(6px);
	}

	a.activeSlide:before {
		background: #eee;

		display: block;
		content: "\0020";

		width: 8px;
		height: 8px;

		position: absolute;
		left: 2px;
		top: 2px;

		@include box-shadow(inset 1px 1px 1px rgba(255, 255, 255, .6));
		@include border-radius(4px);
	}
}
